import { Tabs } from 'antd';

import List from './components';
import Search from './components/search';

export default function MarketContainer() {
  const arr = [
    {
      label: '全部市场',
      icon: 'solar:user-id-bold',
      key: '1',
    },
    {
      label: '供方挂单',
      icon: 'solar:user-id-bold',
      key: '2',
    },
    {
      label: '需方挂单',
      icon: 'solar:user-id-bold',
      key: '3',
    },
  ];

  const doSearch = () => {
    console.log('doSearch');
  };
  return (
    <>
      <Search />
      <Tabs
        defaultActiveKey="1"
        key="key"
        type="card"
        destroyInactiveTabPane
        items={arr.map((_, i) => {
          const id = String(i + 1);
          return {
            label: (
              <div className="flex items-center">
                <span>{_.label}</span>
              </div>
            ),
            key: id,
            forceRender: false,
            children: <List id={id} doSearch={doSearch} />,
          };
        })}
      />
    </>
  );
}
